<template>
<el-tabs class="sys-log" v-model="activeName" type="border-card" ref="unitWrap" slot="last" v-rs-resize="onResize">
    <el-tab-pane label="操作日志" name="operation">
        <div class="rs-toolbar">
            <el-button-group>
                <el-button type="primary" size="small" icon="rs-icon-add-circle-fill" @click="loadLog">刷新</el-button>
            </el-button-group>
        </div>
        <el-table
            ref="opTable"
            :max-height="tableHeight"
            :height="tableHeight"
            :data="opList"
            border
            size="small"
            highlight-current-row
            style="width: 100%"
            >
                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                <el-table-column prop="userName" label="用户名" width="120"></el-table-column>
                <el-table-column prop="operation" label="用户操作" width="120"></el-table-column>
                <el-table-column prop="ip" label="访问地址" width="100"></el-table-column>
                <el-table-column prop="milliseconds" label="执行时长" width="100"></el-table-column>
                <el-table-column prop="accessDate" label="访问时间" width="160"></el-table-column>
                <el-table-column prop="methodName" label="请求方法" width="300"></el-table-column>
                <el-table-column prop="parameters" label="请求参数"></el-table-column>                
        </el-table>
        <RsPagination :currentPage="opPage.page" :pageSize="opPage.pageSize" :totalCount="opCount" @change="onOperationPageInfoChange"></RsPagination>
    </el-tab-pane>
    <el-tab-pane label="登录日志" name="login">
        <div class="rs-toolbar">
            <el-button-group>
                <el-button type="primary" size="small" icon="rs-icon-add-circle-fill" @click="loadLoginLog">刷新</el-button>
            </el-button-group>
        </div>
        <el-table
            ref="loginTable"
            :max-height="tableHeight"
            :height="tableHeight"
            :data="loginList"
            border
            size="small"
            highlight-current-row
            style="width: 100%"
            >
                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                <el-table-column prop="userName" label="用户名称" width="180"></el-table-column>
                <el-table-column prop="loginName" label="登录名称" width="120"></el-table-column>
                <el-table-column prop="ip" label="登录地址" width="100"></el-table-column>
                <el-table-column prop="loginDate" label="登录时间"></el-table-column>
        </el-table>
        <RsPagination :currentPage="loginPage.page" :pageSize="loginPage.pageSize" :totalCount="loginCount" @change="onLoginPageInfoChange"></RsPagination>
    </el-tab-pane>
</el-tabs>
</template>
<script>
import tips from '../../mixin/tips';
import deepmerge from 'deepmerge';
export default {
    name:'LogPage',
    components:{},
    mixins:[tips],
    data(){
        return {
            activeName:'operation',
            tableHeight:0,
            opList:[],
            loginList:[],
            opCount:0,
            loginCount:0,
            opPage:{
                page:0,
                pageSize:20
            },
            loginPage:{
                page:0,
                pageSize:20
            }
        }
    },
    created(){
        this.loadLog();
        this.loadLoginLog();
    },
    methods:{ 
        onResize(obj){
            this.tableHeight = obj.height - 104;
        },
        onOperationPageInfoChange(obj){
            this.opPage.pageSize = obj.pageSize;
            this.opPage.page = obj.currentPage;
            this.loadLog(this.query);
        },
        onLoginPageInfoChange(obj){
            this.loginPage.pageSize = obj.pageSize;
            this.loginPage.page = obj.currentPage;
            this.loadLoginLog(this.query);
        },
        loadLog(){

            this.loading = true;
            this.$req({
                url: '/log/access',
                method: 'post',
                data:this.opPage
            })
            .then(response => {
                this.loading = false;
                const { data } = response;
                if( data.error_code == 0 ){
                    
                    this.opList = data.list;
                    this.opCount = data.totalCount;
                }else{
                    this.showError("操作失败！");
                }
            }).catch(error => {
                this.loading = false;
            });
        },
        loadLoginLog(){
            this.loading = true;
            this.$req({
                url: '/log/login',
                method: 'post',
                data:this.loginPage
            })
            .then(response => {
                this.loading = false;
                const { data } = response;
                if( data.error_code == 0 ){
                    
                    this.loginList = data.list;
                    this.loginCount = data.totalCount;
                }else{
                    this.showError("操作失败！");
                }
            }).catch(error => {
                this.loading = false;
            });
        }
    }
}
</script>